<template>
  <div class="big-img-box">
    <div class="big-img-mark" @click="closeBigImg" />
    <div class="big-img-swiper">
      <div class="big-img-close" @click="closeBigImg" />
      <div v-swiper:mySwiper="swiper">
        <div class="swiper-wrapper">
          <div
            v-for="(item, i) in list"
            :key="item.image_id"
            class="swiper-slide"
            :data-hash="'slide'+i"
          >
            <img
              class="big-img-item"
              :src="item.image_url"
              alt=""
            >
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets" />
      </div>
      <div class="big-img-thumb">
        <img
          v-for="(item, i) in list"
          :key="item.image_id"
          :src="item.thumbnail_url"
          :class="[i === imgIndex? 'big-img-thumb-item sp': 'big-img-thumb-item']"
          alt=""
          @click="changeImgIndex(i)"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      swiper: {
        loop: true,
        centeredSlides: true,
        autoplay: false,
        simulateTouch: false,
        initialSlide: 0
      },
      imgIndex: 0
    }
  },
  mounted() {
    this.imgIndex = this.index
    this.mySwiper.slideTo(this.imgIndex + 1)
  },
  methods: {
    changeImgIndex(i) {
      this.imgIndex = i
      this.mySwiper.slideTo(this.imgIndex + 1)
    },
    closeBigImg() {
      this.$emit('closeBigImg')
    }
  }
}
</script>

<style lang="scss">
.big-img-mark {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
}
.big-img-swiper {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -350px 0 0 -500px;
  height: 700px;
  width: 1000px;
  background: #000;
  box-shadow: 0 0 6px #000;
  .big-img-item {
    display: block;
    width: 700px;
    height: 635px;
    margin: 5px auto 0;
    object-fit: contain;
  }
}
.big-img-thumb {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}
.big-img-thumb-item {
  width: 50px;
  height: 50px;
  margin: 0 3px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #000;
  &.sp {
    border: 2px solid #9780ff;
  }
}
.big-img-close {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 2;
  width: 32px;
  height: 32px;
  cursor: pointer;
  &:before, &:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #898989;
  }
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
}
</style>

